<template>
	<view class="wx-wrap">
		<u-navbar leftIconSize="0" title=" " :placeholder="true" ref="nav">
			<view class="" slot="left">
				<u-search v-model="searchValue" @search="searchClick" placeholder="请输入搜索更多表情" :animation="true"
					@change="onChange"></u-search>
			</view>
		</u-navbar>
		<scroll-view class="img-wrap" @scrolltolower="lowerBottom" @refresherrefresh="getFresh" scroll-y="true">
			<view class="img-item" v-for="(item, index) in imgList" :key="index">
				<u-image :radius="10" :showLoading="true" :src="item" width="200rpx" height="200rpx" :fade="true"
					duration="450" lazyLoad @click="onImageClick(item)">
					<template v-slot:loading>
						<view
							style="font-size: 12px;height: 100px;display: flex;align-items: center;justify-content: center;">
							<u-loading-icon color="#000"></u-loading-icon>
						</view>
					</template>
				</u-image>
			</view>
		</scroll-view>
		<u-back-top></u-back-top>
		<tabbar cur="emjio"></tabbar>
		<u-loading-page :loading="isloading" bg-color="rgba(0, 0, 0, .3)" loadingText=" "></u-loading-page>
	</view>
</template>

<script>
	import API from '../../api/api.js';

	export default {
		data() {
			return {
				tabList: [],
				current: 0,
				cur: 'emjio',
				cat_id: "",
				pageNo: 1,
				imgList: [],
				isloading: false,
				searchValue: '',
				page: 1,
				height: 0
			};
		},
		async onLoad() {
			this.queryList()
		},
		onReady() {
			let that = this;
			uni.getSystemInfo({ // 获取系统信息
				success: function(res) {}
			});
		},
		methods: {
			lowerBottom() {
				this.page++
				this.queryList()
			},
			onImageClick(src) {
				this.isloading = true
				uni.downloadFile({
					url: src, //分享的图片的链接
					success: (res) => {
						this.isloading = false
						wx.showShareImageMenu({
							path: res.tempFilePath
						})
					}
				})
			},
			async getCategory() {
				const params = {
					dbName: 'emjio-classify'
				}
				const res = await API.getCategory(params)
				this.cat_id = res[0].id
				this.tabList = res
				this.queryList()
			},
			async queryList() {
				this.isloading = true
				// this.imgList = []
				// const params = {
				// 	dbName: 'emjio-list',
				// 	pageNo: this.pageNo,
				// 	cat_id: this.cat_id
				// }
				// API.getList(params).then(res => {
				// 		for (var i in res) {
				// 			var tmp = res[i]
				// 			if (typeof(tmp.imgs) == 'string') {
				// 				tmp['list'] = JSON.parse(tmp.imgs)
				// 			} else {
				// 				tmp['list'] = tmp.imgs
				// 			}
				// 		}
				// 		this.imgList = res[0].list
				// 		this.isloading = false
				// 	})
				// 	.catch(err => {
				// 		this.isloading = false
				// 	})
				const res = await uni.request({
					url: 'https://cn.apihz.cn/api/img/apihzbqb.php',
					// url: 'https://cn.apihz.cn/api/img/apihzbqbbaidu.php'
					method: 'get',
					data: {
						id: '88888888',
						key: '88888888',
						type: this.searchValue ? '2' : '1',
						words: this.searchValue,
						page: this.page,
						limit: 50
					}
				})
				this.imgList = this.imgList.concat(res[1].data.res)
				this.isloading = false
			},
			tabsChange(item) {
				this.cat_id = item.id
				this.queryList()
			},
			searchClick(value) {
				if (!value) return
				// uni.navigateTo({
				// 	url: `/pages/emjio/searchList?msg=${this.searchValue}`
				// })
				this.imgList = []
				this.page = 1
				this.queryList()
			},
			onChange() {
				if (!this.searchValue) {
					this.page = 1
					this.imgList = []
					this.queryList()
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	.img-wrap {
		width: 95%;
		height: calc(100vh - 120px);
		margin: 0rpx auto 40rpx;
		// display: flex;
		// flex-wrap: wrap;

		.img-item {
			display: inline-block;
			margin: 20rpx 1.6%;
			width: 30%;
			// display: flex;
			justify-content: center;
			align-items: center;
			padding: 10rpx;
			box-shadow: 0 0 5rpx #ccc;
			border-radius: 10rpx;
			box-sizing: border-box;
		}
	}
</style>